<template>
  <div class="type-container">
    <div class="type-main">
      <ul>
        <li v-for="item in typeBarList" :key="item.typeId">
          <router-link
            :to="{
              path: '/typeList',
              query: { typeId: item.typeId, typeName: item.typeName },
            }"
            :key="item.typeId"
          >
            <div><img :src="item.typeImage" /></div>
            <h3>{{ item.typeName }}</h3>
            <p>{{ item.typeDes }}</p>
            <hr />
            <div class="type-time">
              <i class="iconfont">&#xe64d;</i>{{ item.createTime | formatDate }}

              <span class="type-add"
                ><i class="iconfont">&#xe60d;</i>{{ item.articleNum }}</span
              >
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import "@/assets/css/type.css";
import { getTypeList } from "@/api/type";
import { formatDate } from "@/utils/date";
export default {
  name: "type",
  data() {
    return {
      typeBarList: [],
    };
  },
  created() {
    this.getTypeListFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getTypeListFun() {
      getTypeList().then((response) => {
        this.typeBarList = response.data;
      });
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
</style>
